<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="end">
          <el-button class="AddPerm" size="mini" type="primary" @click="addPerm('0',1)">
            <i class="el-icon-plus" />
            新增权限
          </el-button>
        </el-row>
        <!-- 表格 -->
        <el-table border :data="permList" row-key="id" default-expand-all>
          <el-table-column align="center" label="名称" prop="name" />
          <el-table-column align="center" label="标识" prop="code" />
          <el-table-column align="center" label="描述" prop="description" />
          <el-table-column align="center" label="操作">
            <template #default="{row}">
              <!-- 这里的添加是添加二级权限,如果是二级权限隐藏添加,一级权限才显示 -->
              <el-button v-if="row.type===1" type="text" @click="addPerm(row.id,2)">添加</el-button>
              <el-button type="text" @click="editPerm(row.id)">编辑</el-button>
              <el-button type="text" @click="delPerm(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 放置一个新增权限弹窗 -->
      <el-dialog :visible="showDialog" :title="`${showText}权限点`" @close="btnCancel">
        <!-- 表单 -->
        <el-form ref="permForm" :model="formData" :rules="rules" label-width="120px">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" />
          </el-form-item> <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>
          <el-form-item label="开启">
            <el-switch
              v-model="formData.enVisible"
              active-value="1"
              inactive-value="0"
            />
          </el-form-item>
        </el-form>
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" type="primary" @click="btnOK">确定</el-button>
            <el-button size="small" @click="btnCancel">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 引入获取权限接口
import { getPermList } from '@/api/permission'
import { listToTreeData } from '@/utils/index'
import { delPermission, addPermission, getPermById, updatePermission } from '@/api/permission'
export default {
  data() {
    return {
      permList: [], // 权限数据
      showDialog: false,
      formData: {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        type: '', // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: '', // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: '1' // 默认开启,选择1
      },
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '权限描述不能为空', trigger: 'blur' }]
      }
    }
  },

  // 计算属性
  computed: {
    showText() {
      return this.formData.id ? '编辑' : '新增'
    }
  },

  created() {
    // 创建周期获取权限数据
    this.getPermList()
  },

  methods: {
    // 获取权限请求
    async getPermList() {
      this.permList = listToTreeData(await getPermList(), '0')
      // console.log(await getPermList())
      // console.log(this.permList)
    },
    // 添加权限
    addPerm(id, type) { // 接收id:pid,type:权限等级
      this.formData.pid = id
      this.formData.type = type
      this.showDialog = true
    },

    // 编辑权限
    async editPerm(id) {
      // 数据回显
      this.formData = await getPermById(id)
      console.log(this.formData)
      this.showDialog = true
    },

    // 删除权限
    async delPerm(id) {
      try {
        await this.$confirm('是否删除权限?')
        await delPermission(id)
        this.$message.success('删除成功')
        this.getPermList()
      } catch (error) {
        console.log(error)
      }
    },

    // 点击确定,保存修改权限
    async btnOK() {
      try {
        // 校验
        await this.$refs.permForm.validate()
        // 判断是否有id,有就是编辑,没有表示新增
        if (this.formData.id) {
          await updatePermission(this.formData)
        } else {
          // 发请求
          await addPermission(this.formData)
        }
        // 提示
        this.$message.success('操作成功')
        // 关闭页面
        this.showDialog = false
        // 更新页面
        this.getPermList()
      } catch (error) {
        console.log(error)
      }
    },

    // 点击取消
    btnCancel() {
      // 清空数据
      this.formData = {
        name: '',
        code: '',
        description: '',
        type: '',
        pid: '',
        enVisible: '1'
      }
      // 清除校验
      this.$refs.permForm.resetFields()
      // 关闭弹窗
      this.showDialog = false
    }
  }
}
</script>

<style>
.AddPerm{
  margin-bottom: 10px;
}
</style>
